<template>
  <div class="record-table" style="flex: 1; padding: 20px; min-width: 0; background-color: #0e2f60; overflow-y: auto;">
		<div class="date-types">
		  <ul>
		    <li
		      v-for="(data, index) in dataTypes"
		      :key="index"
		      :class="{ active: dataTypesIndex == index }"
		      @click="choseDateType(index)"
		    >
		      {{ data }}
		    </li>
		  </ul>
		</div>
		<el-table :data="recordList" style="width: 100%" v-loading="loading">
			<el-table-column prop="where" label="页面"></el-table-column>
			<el-table-column prop="sum" label="浏览数"></el-table-column>
			<el-table-column prop="add_num" label="新增数量"></el-table-column>
			<el-table-column prop="last_add_num" label="上期数量"></el-table-column>
			<el-table-column label="横向增长百分比">
				<template slot-scope="scope">{{scope.row.add_num_rate}}%</template>
			</el-table-column>
		</el-table>
		<div class="pages" style="padding-bottom: 20px;">
			<el-pagination
			  background
			  layout="prev, pager, next"
				:page-size="30"
			  :total="total"
				@current-change="init($event-1)">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				loading: true,
				recordList: [],
				total: 0,
				dataTypes: [
				  "今日",
				  "昨日",
				  "本周",
				  "上周",
				  "本月",
				  "上月",
				  "今年",
				  "去年",
				],
				dataTypesIndex: 0,
			}
		},
		methods: {
			init(page,time){
				let data = {
					type: 3,
					time: time,
					page_type: 1,
					limit: 20,
					page: page
				}
				this.loading = true
				this.$http(this.$ptApiList.UserPageTable,data).then(res => {
					this.loading = false
					this.recordList = res.datas
					this.total = res.count
				})
			},
			choseDateType(index) {
			  let time = "";
			  switch (index) {
			    case 0:
			      time = "today";
			      break;
			    case 1:
			      time = "yestoday";
			      break;
			    case 2:
			      time = "week";
			      break;
			    case 3:
			      time = "lastWeek";
			      break;
			    case 4:
			      time = "month";
			      break;
			    case 5:
			      time = "lastMonth";
			      break;
			    case 6:
			      time = "year";
			      break;
			    case 7:
			      time = "lastYear";
			      break;
			  }
			  this.dataTypesIndex = index;
			  this.init(0,time);
			},
		},
		created(){
			this.init(0,'today')
		}
	}
</script>
<style lang="scss">
	.record-table{
		.date-types {
		  margin: 0 0 20px;
		  width: 500px;
		  height: 22px;
		  line-height: 20px;
		  border: solid 1px #277c9a;
		  border-radius: 5px;
		  position: relative;
		  overflow: hidden;
		  ul {
		    display: flex;
		    align-items: center;
		    li {
		      position: relative;
		      flex: 1;
		      text-align: center;
		      cursor: pointer;
		      color: #fff;
		      position: relative;
		      z-index: 2;
		      font-size: 12px;
		      transition: all 0.2s;
		      &.active {
		        color: #030e39;
		        background-color: #00fbfc;
		        &::after {
		          background-color: #00fbfc;
		        }
		      }
		      &::after {
		        content: "";
		        position: absolute;
		        top: 50%;
		        right: 0;
		        transform: translateY(-50%);
		        width: 1px;
		        height: 10px;
		        background-color: #277c9a;
		      }
		      &:last-child {
		        &::after {
		          width: 0px;
		        }
		      }
		    }
		  }
		}
		.el-table {
			background-color: transparent;
			&::before{
				background-color: #00fbfc;
			}
			tr{
				background-color: transparent;
			}
			&.el-table--enable-row-hover .el-table__body tr:hover > td{
				background-color: #0a3370 !important;
			}
			thead{
				position: relative;
				&::before{
					content: " ";
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 1px;
					background-color: #00fbfc;
					z-index: 10;
				}
				&::after{
					content: "";
					position: absolute;
					top: 48px;
					left: 0;
					width: 100%;
					height: 1px;
					background-color: #00fbfc;
					z-index: 10;
				}
				th{
					background-color: #001a52 !important;
					color: #FFF;
				}
			}
			th.is-leaf, td{
				color: #FFF;
				border-bottom: none;
			}
			.el-table__row{
				position: relative;
				background-color: transparent;
				td{
					border-bottom: solid 1px #00fbfc;
				}
			}
		}
	}
</style>